<template>
  <div class="main">
    <div class="header">
      <img
        class="img"
        src="https://img.gejiba.com/images/ba6e3bd42fb11a88989384e034891023.png"
        alt=""
      />
      <p class="title">光谷智慧交通欢迎您</p>
    </div>
    <div class="card">
      <div class="cardSub">
        <van-form @submit="onSubmit" class="form">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px" class="submit">
            <van-button type="primary" round block native-type="submit">
              提交
            </van-button>
            <van-button type="primary" round block @click="enrole">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getUsers } from '../api/users'
import router from '../router'
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const onSubmit = (values) => {
  console.log('submit', values)
  const user_name = values.用户名
  const user_pwd = values.密码
  getUsers(user_name, user_pwd).then((res) => {
    console.log(res)
    if (res.data.code == 0) {
      localStorage.setItem('isLogin', 1)
      alert('登录成功')
      router.push('./')
    } else if (res.data.code == 100104) {
      localStorage.setItem('isLogin', 0)
      alert(res.data.message)
    } else {
      localStorage.setItem('isLogin', 0)
      alert('登录失败')
    }
  })
}
const enrole = () => {
  router.push('./enrole')
}
</script>
<style>
.main {
  width: 100vw;
  height: 100vh;
  background: url('https://img.gejiba.com/images/0d6ebcef7bb041e88e248c8590828357.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #fff;
}
.header {
  width: 100%;
  height: 25vh;
}
.title {
  text-align: center;
  font-family: '站酷快乐体2016修订版';
  font-weight: 400;
  src: url('//at.alicdn.com/wf/webfont/QomhUPOAwZvq/JDA9wsG4cIVhT-3IM4YQC.woff2')
      format('woff2'),
    url('//at.alicdn.com/wf/webfont/QomhUPOAwZvq/1sPAIsf2R8NSZfjmm3tzn.woff')
      format('woff');
  font-display: swap;
  font-size: 26px;
  color: #14b4c9;
}
.img {
  height: 15vh;
  width: 30vw;
}
.form {
  width: 70vw;
  height: 10vh;
  margin: 0 auto;
}
.cardImg {
  width: 30vw;
}
.card {
  width: 100vw;
  height: 60vh;
  margin: 0 auto;
}
@font-face {
  font-family: '站酷快乐体2016修订版';
  font-weight: 400;
  src: url('//at.alicdn.com/wf/webfont/QomhUPOAwZvq/JDA9wsG4cIVhT-3IM4YQC.woff2')
      format('woff2'),
    url('//at.alicdn.com/wf/webfont/QomhUPOAwZvq/1sPAIsf2R8NSZfjmm3tzn.woff')
      format('woff');
  font-display: swap;
}
.submit {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
}
</style>
